import React, { useEffect } from 'react';
import { Form, Row, Col, Input, Button } from 'antd';
import { AddCqBaseForm } from '@/types/cq';

import { formLayout, basicFormItemLayout, basicFormItemLangLayout } from '@/utils/commons';

interface ModifyPasswordProps {
  /** 是否自己提交 */
  submitFlag: boolean;
  addLoading: boolean;
}

const FormItem = Form.Item;

/**
 * 修改密码
 */
const ModifyPasswordForm: React.FC<ModifyPasswordProps> = (props) => {

  // const formRef = React.createRef<FormInstance>();
  const [form] = Form.useForm<AddCqBaseForm>();

  useEffect(() => {
    console.info('ModifyPasswordForm.useEffect');
    // 查询本页面需所有参数
    // 获取所属系统
    // 获取审核人列表
    // const { dispatch } = props;
    // dispatch(CQ_ADD_INIT({}));
  }, []);

  const handleSubmit = async () => {
    // console.log(formRef);
    form.validateFields().then(fieldsValue => {
      console.info(fieldsValue);
    }).catch();
  };

  const handleReset = () => {
    // 先清除form表单
    form.resetFields();
  }

  const { addLoading, submitFlag = false } = props;
  const colon = false;
  // 8-8布局
  const formItemLayout = basicFormItemLayout;
  // 8-16布局
  const formItemLangLayout = basicFormItemLangLayout;

  return (
    <Form layout={formLayout} form={form} onFinish={handleSubmit}>
      <Row>
        <Col span={12}>
          <FormItem label="旧密码" name='oldPass' {...formItemLayout} colon={colon}
            rules={[
              { required: true, message: '旧密码必输' },
              /**
              { pattern: new RegExp(/^[A-Za-z][A-Za-z0-9]{16,16}$/, "g"), message: '需求编号只能以字母开头，16位的A-Za-z0-9组成' }
              */
            ]}>
            <Input placeholder='请输入旧密码'/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <FormItem label="新密码" name='newPass' {...formItemLangLayout} colon={colon}
            rules={[
              { required: true, message: '新密码必输' }
            ]}>
            <Input placeholder='请输入新密码'/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <FormItem label="确认密码" name='newPass' {...formItemLangLayout} colon={colon}
            rules={[
              { required: true, message: '确认密码必输' }
            ]}>
            <Input placeholder='确认密码与新密码一致'/>
          </FormItem>
        </Col>
      </Row>
      {submitFlag && (
        <Row justify='center'>
          <Col>
            <FormItem>
              <Button type="primary" loading={addLoading} htmlType="submit">
                提交
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
            </FormItem>
          </Col>
        </Row>
        )
      }
    </Form>
  );
}

export default ModifyPasswordForm;